import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-time1',
    template: `
        <body>
            <div id="clock">
                <p class="date">{{ date }}</p>
                <p class="time">{{ time }}</p>
<!--                <p class="text">数字时钟 Vue.js</p>-->
            </div>
        </body>
  `,
    styles: [
        `
            @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");
            html,
            body {
                height: 100%;
            }

            body {
                background: #0f3854;
                background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
                background-size: 100%;
            }

            p {
                margin: 0;
                padding: 0;
            }

            #clock {
                font-family: "Share Tech Mono", monospace;
                color: #ffffff;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #daf6ff;
                text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
            }

            #clock .time {
                letter-spacing: 0.05em;
                font-size: 80px;
                padding: 5px 0;
            }
    `
    ],
    encapsulation: ViewEncapsulation.None
})
export class Time1Component implements OnInit{
    time: string;
    date: string;
    week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

    ngOnInit(): void {
        setInterval(() => {
            this.updateTime();
        }, 1000);
    }


updateTime() {
    const cd = new Date();
    this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
    this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
    };

     zeroPadding(num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digit);
    }

}
